<template>
    <div class="person">
      <h3>子组件1,2：实现基本数据类型的响应式
        ,对象数据类型的响应式. </h3>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年龄：{{ person.age }}</h2>
      <ul>
        <li v-for="(value,key) in person.milk ">{{ value }}</li>
      </ul>
      <button @click="changName">点击修改姓名</button>
      <button @click="changAge">点击修改年龄</button>
      <button @click="changmk1">点击修改爱好1</button>
      <button @click="changmk">爱喝牛奶</button>
    </div>
  </template>
  <script lang="ts" setup name="Person">
  import { reactive, ref, watch } from 'vue'
  let person = reactive({
    name:'ycy',
    age:18,
    milk:{
      mk1:'唱',
      mk2:'跳',
      mk3:'rap'
    }
  })
  function changName(){
    person.name +='~'
  }
  function changAge(){
    person.age += 1
  }
  function changmk1(){
    person.milk.mk1='篮球'
  }
  function changmk(){
    person.milk = {
      mk1:'伊利',
      mk2:'特仑苏',
      mk3:'蒙牛'
    }
  }
  //监视revative修饰的对象属性，基本类型的，不能直接写对象，直接写属性，要写getter函数（箭头函数)()=>{return person.name}
  watch(()=>{return person.name},(newValue,oldValue)=>{
   console.log('person的name属性变化了',newValue,oldValue)
  })
  //revative监视对象属性，该对象是对象属性时，不用写getter函数，默认开启深度监视
  watch(person.milk,(newValue,oldValue)=>{
   console.log('person的name属性变化了',newValue,oldValue)
  })
  //revative监视对象属性，该对象是对象属性时，如果用getter函数获取时，要开启深度监视才能监视到
  // watch(()=>{return person.milk},(newValue,oldValue)=>{
  //  console.log('person的milk属性变化了',newValue,oldValue)
  // },{deep:true})
  </script>
  